<script setup>
import State from "stats.js";
import { onMounted } from "vue";

import { useRouter } from "vue-router";
const router = useRouter();

const back = () => {
  setTimeout(() => {
    router.push("/home");
  }, 110);
};

const addListener = () => {
  let dom = document.getElementById("btn");
  dom.addEventListener("mousedown", () => {
    dom.style.top = "15px";
    dom.style.background = "rgb(245, 245, 245)";
    dom.style.boxShadow =
      "inset 8px 8px 10px rgb(250, 250, 250), inset -6px -6px 10px rgb(141, 141, 141), 8px 8px 10px rgb(161, 161, 161)";
  });
  document.addEventListener("mouseup", () => {
    dom.style.top = "10px";
    dom.style.background = "rgb(240, 240, 240)";
    dom.style.boxShadow =
      "inset 8px 8px 10px rgb(250, 250, 250), inset -6px -6px 10px rgb(131, 131, 131), 15px 15px 15px rgb(151, 151, 151)";
  });
};

let stats = null;
onMounted(() => {
  if (!stats) {
    stats = new State();
    stats.showPanel(0);
    document.getElementById("FPS").appendChild(stats.domElement);
  }
  window.requestAnimationFrame(animate);

  addListener();
});

const animate = () => {
  stats.begin();
  stats.end();
  window.requestAnimationFrame(animate);
};
</script>

<template>
  <div
    id="btn"
    @click="back"
    style="position:absolute;top:10px;right:calc(10% - 50px)"
  >回首页</div>
  <div id="FPS"></div>
  <router-view></router-view>
</template>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
</style>
